<template>
  <div class="user">
    <!-- 内容组件 -->
    <content-template :formData="formData"
                      :searchData="searchData"
                      :tableData="tableData"
                      :getDatas ="getDatas"
                      >
            <div slot="content_top_left">
                <Button  type="primary"  @click="handledom">
                    <span>下载会员数据</span>
                </Button>
            </div>  
    </content-template>
    <!-- 弹框组件 -->
    <dialog-template
            :options = "formData.options.hasAdd">
            <!-- 表单组件 -->
        <form-template
            :formData="formData"
            :options="formData.options.hasAdd"
            :formValidate="formData.formValidate"
            :rules="formData.ruleValidate"
            :list="formData.list"
            
        >             
        </form-template>
    </dialog-template>
    <Modal
        v-model="modal1"
        title="请输入二级密码"
        @on-ok="ok"
        @on-cancel="cancel">
        <Input v-model="paw" type="password" placeholder="请输入二级密码"  />
    </Modal>         
    <!-- 弹框组件 -->
    <dialog-template
            :options = "share">
            <!-- 表单组件 -->
        <!-- 内容组件 -->
        <content-template :formData="share.formData"
                          :searchData="share.searchData"
                          :tableData="share.tableData"
                          :getDatas ="getshare"
                          >
        </content-template>
    </dialog-template>
     <!-- 弹框组件 -->
    <dialog-template
            :options = "detail">
            <!-- 表单组件 -->
        <Form style="padding:50px" :label-width="150">
          <FormItem label="简介:">
              <div style="height: 140px;border-radius: 5px;padding:10px;border: 1px solid #f2f2f2">
                 {{detail.data.profile}}
              </div>
          </FormItem>
          <FormItem label="广告链接:">
              <div>
                 {{detail.data.shop_url}}
              </div>
          </FormItem>
          <FormItem label="联系方式:">
              <div>
                 {{detail.data.phone}}
              </div>
          </FormItem>
          <FormItem label="微信二维码:">
              <div>
                 <img style="width: 150px;height: 150px;" :src="$imgUrl + detail.data.wechat_url " />
              </div>
          </FormItem>
          <FormItem>

              <Button style="margin-left: 8px" @click="handleclose()">关闭</Button>
          </FormItem>
        </Form>
    </dialog-template>
  </div>
</template>
<script>
export default {
   data() {
    return {
      modal1:false,
      action_pwd:'',
      paw:'',
      url:'',
      detail:{
        modal: false,        //弹框状态
        title:'' ,      //弹框标题
        width:800,           //弹框宽度
        class:"dialogClass", //弹框类名
        zIndex:100,          //弹框层级
        loading:true,        //弹框加载圈
        data:{
          profile:'',
          shop_url:'',
          phone:'',
          wechat_url:''
        }
      },
      share:{
        index:0,
        modal: false,        //弹框状态
        isedit: false,       //是否是编辑状态
        title:'分享记录' ,      //弹框标题
        width:800,           //弹框宽度
        class:"dialogClass", //弹框类名
        zIndex:100,          //弹框层级
        loading:true,        //弹框加载圈
        formData:{
          index:'',
          options:{
            hasAdd:{  //需不需要新增按钮——为空时不显示
              
            },
            hasSelect:{
              selectList:[
                 
              ]
            }       
          },
          list: [ //表单列表——进行一些表单操作
            // {
            //    type: 表单类型,
            //    label: 表单标题，
            //    prop:表单下标指引，要对应formValidate的字段
            //    formStyle:自定义表单的样式
            //    value:传入自定义数据
            // }
        
          ],
        },
        searchData:{  
          searchValue: {  //搜索值
         
          },
          searchColumns: [ //搜索条件和搜索数量——不传则没有
            
          ]
        },
        tableData:{  //表格数据及操作
          columns: [
            {
              title: '时间',
              key: 'create_time',
              align: 'center',
            }, 
            {
              title: '内容标题',
              key: 'news_title',
              align: 'center',
            }       
          ],
          data: [], //表格数据
          total:0,  //表格数据总量
          page:1,   //表格数据页码
          per_page:50,  //表格一页显示几条数据
          loading: true, //表格数据预加载
        }
      },
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
           
          },
          hasSelect:{
            selectList:[
               
            ]
          }       
        },
        list: [ //表单列表——进行一些表单操作
          // {
          //    type: 表单类型,
          //    label: 表单标题，
          //    prop:表单下标指引，要对应formValidate的字段
          //    formStyle:自定义表单的样式
          //    value:传入自定义数据
          // }
          
        ],
      },
      searchData:{  
        searchValue: {  //搜索值
          nickname: '',
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          {
            key: 'nickname',
            label: "名字",
          },
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
          {
            title: '头像+昵称',
            key: 'manager_name',
            align: 'center',
            render: (h, params) => {
              if ( params.row.head_url != null) {
                return h('div', {
                    style: {
                      padding:'10px',
                      display:'flex',
                      alignItems: 'center',
                    },
                  },[
                  params.row.head_url?
                  h('img', {
                    style: {
                      width: '50px',
                      height: '50px',
                      display: 'inline-block',
                      marginRight: '15px',
                      marginLeft: '20px',
                      borderRadius: '50%',
                      cursor: 'pointer'
                    },
                    attrs: {
                      src: params.row.head_url
                    }
                  }):'',
                  h('span',{
                    style: {
                      color: '#505050',
                      fontsize: '14px',
                    },
                  },params.row.nickname)
                ])
              }else{
                return h('div', {
                  style: {
                    width: '95px',
                    height: '32px'
                  }
                })
              }
            },
          },
          {
            title: '加入时间',
            key: 'create_time',
            align: 'center',
          },
          {
            title: '会员到期时间',
            key: 'expire_time',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 300,
            align: 'center',
            render: (h, params) => {
              let status = params.row.status
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.goshare(params.index)
                    }
                  }
                }, '分享记录'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.seedetail(params.index)
                    }
                  }
                }, '查看个人资料'),
                h('Button', {
                  props: {
                    type:
                     status == 1
                      ? 'warning'
                      : status == 2
                      ? 'success'
                      : 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.changeStatus(params.index)
                    }
                  }
                },
                status == 1
                ? '禁用'
                : status == 2
                ? '启用'
                : '未知'
                ),
              ]);
            }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:50,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  mounted() {
    this.url = this.$imgUrl + '/backend/user/export?is_vip=2&session_id=' +  this.Cookies.get('session')
    this.getDatas();
    this.getServe()
  },
  methods: {
    handledom(){
       this.modal1 = true
    },
    getServe(){
      let params = {
         opt: 1
      }
      this.$api.getseverdetail(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.action_pwd = res.data.action_pwd
          }
      })
    },
    ok () {
      if(this.paw == this.action_pwd){
         window.location.href = this.url
      }else{
         this.$Message.error('密码错误');
      }
    },
    cancel () {
        this.$Message.info('取消设置');
    },
    handleclose(){
       this.detail.modal = false
    },
    goshare(index){
      this.share.modal = true
      this.share.index = index
      this.getshare()
    },
    getshare(){
      let params = {
        user_id:this.tableData.data[this.share.index].user_id,
      }
      this.$api.getuser_news(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.share.tableData.data = res.data.data
              this.share.tableData.total = res.data.total
              this.share.tableData.loading = false
          }
      })
    },
    seedetail(index){
      let params = {
        user_id:this.tableData.data[index].user_id,
      }
      this.$api.getuserdetail(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.detail.data.profile = res.data.profile
              this.detail.data.shop_url = res.data.shop_url
              this.detail.data.phone = res.data.phone
              this.detail.data.wechat_url = res.data.wechat_url
              this.detail.modal = true
          }
      })
    },
    getDatas(){
      let params = {
        page:this.tableData.page,
        per_page:this.tableData.per_page,
        nickname:this.searchData.searchValue.nickname,
        is_vip : 2,
        is_subscribe :2,
      }
      this.$api.getuser(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    changeStatus(index){
      let status = "";
      let text = "";
      switch( this.tableData.data[index].status){
        case 1:
          text = "禁用"
          status = 2
          break;
        case 2:
          text = "启用"
          status = 1
          break;
        default:
          console.log('其他')
      };
      let params = {
        user_id: this.tableData.data[index].user_id,
        status: status
      }
      this.$api.statususer(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success( text + '成功');
              this.getDatas();
            }
      })
    },
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
